import React, { Component } from "react";
import TopNavBar from "@/components/TopNavBar";
import { Button, InputItem, List, Toast } from "antd-mobile";
// import axios from "axios";
import { connect } from "react-redux";
import * as actions from "@/store/user/actions";

class Login extends Component {
  constructor(props) {
    super(props);
    if (this.props.token) {
      this.props.history.replace("/fav");
    }
  }

  state = {
    username: "",
    usernameHasError: false,
    password: "",
    passwordHasError: "",
  };
  errorMsg = {
    username: "账号密码不合法",
    password: "密码不合法",
  };

  onErrorClick = (value) => {
    if (this.state[value + "HasError"]) {
      Toast.info(this.errorMsg[value], 3);
    }
  };
  //用户名或密码输入时候匹配调用验证方法
  onChange = (value, name) => {
    this[name + "Validate"](value);
    this.setState({ [name]: value });
  };
  //用户名验证
  usernameValidate(value) {
    if (/^z/.test(value)) {
      this.setState({ usernameHasError: true });
    } else {
      this.setState({ usernameHasError: false });
    }
  }
  //密码验证
  passwordValidate(value) {
    if (/^0/.test(value)) {
      this.setState({ passwordHasError: true });
    } else {
      this.setState({ passwordHasError: false });
    }
  }

  //表单提交验证
  toLogin = async () => {
    let bool = Object.keys(this.state)
      .filter((item) => /HasError$/.test(item))
      .some((item) => this.state[item]);
    if (bool) {
      Toast.info("信息填写不完善", 3);
      return;
    }
    let { username, password } = this.state;
    let code = await this.props.toLoginAction({ username, password });
    if (code === 0) {
      Toast.success("登录成功", 2, () => {
        this.props.history.replace(this.props.url);
      });
    } else {
      Toast.fail("登录异常", 3);
    }

    //axios方式直接调用接口
    // let res = await axios.post("http://localhost:4000/login")
    // const {data:{code}} = res || {}
    // if(code === 0){
    //   Toast.success("登录成功",2,()=>{
    //     this.props.history.replace("/home")
    //   })
    // }else{
    //   Toast.fail("登录出现异常",3)
    // }
  };
  render() {
    return (
      <div>
        <TopNavBar>用户登录</TopNavBar>
        <List>
          <InputItem
            type="text"
            placeholder="请输入账号"
            error={this.state.usernameHasError}
            onErrorClick={() => this.onErrorClick("username")}
            onChange={(value) => this.onChange(value, "username")}
            value={this.state.username}
          >
            账号
          </InputItem>
        </List>
        <List>
          <InputItem
            type="text"
            placeholder="请输入密码"
            error={this.state.passwordHasError}
            onErrorClick={() => this.onErrorClick("password")}
            onChange={(value) => this.onChange(value, "password")}
            value={this.state.password}
          >
            密码
          </InputItem>
        </List>
        <List>
          <Button type="primary" onClick={this.toLogin}>
            用户登录
          </Button>
        </List>
      </div>
    );
  }
}

export default connect((state) => state.user.toJS(), actions)(Login);
